import React, { useState, useCallback } from 'react';
import { Cell, Input, Button, Checkbox, Toast } from 'zarm'
import CustomIcon from '../../components/CustomIcon';
import Captcha from 'react-captcha-code'
import s from './style.module.less'
import { post } from '@/utils'
import cx from 'classnames'
console.log(1111111);
export default function Login() {

    const [type, setType] = useState('login')
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    const [verify, setVerify] = useState('')
    const [captcha, setCaptcha] = useState('')

    const handleChange = useCallback(captcha => {
        console.log('captcha', captcha)
        setCaptcha(captcha)
    }, [])


    const onSubmit = async () => {
        console.log(123);
        if (!username) return Toast.show('请输入帐号')
        if (!password) return Toast.show('请输入密码')


        try {
            if (type == 'login') {
                const { data, msg } = await post('http://127.0.0.1:7001/api/user/login', {
                    username,
                    password
                })
                localStorage.setItem('token', data.token);
                window.location.href = '/'
                Toast.show(msg)
            } else {
                if (!verify) return Toast.show('请输入验证码')
                if (verify != captcha) return Toast.show('验证码错误')
                const { data } = await post('http://127.0.0.1:7001/api/user/register', {
                    username,
                    password
                })
                Toast.show('注册成功')
                setType('login')
            }

        } catch (error) {
            console.log(error);
            Toast.show('系统错误')
        }

    }
    return <div className={s.auth}>
        <div className={s.head}>
        </div>
        <div className={s.tab}>
            <span className={cx({ [s.avtive]: type == 'login' })} onClick={() => setType('login')}>登录</span>
            <span className={cx({ [s.avtive]: type == 'register' })} onClick={() => setType('register')}>注册</span>
        </div>
        <div className={s.form}>
            <Cell icon={<CustomIcon type='zhanghao'></CustomIcon>}>
                <Input clearable type='text' onChange={value => setUsername(value)} placeholder="请输入账号"></Input>
            </Cell>
            <Cell icon={<CustomIcon type='mima'></CustomIcon>}>
                <Input clearable type='text' onChange={value => setPassword(value)} placeholder="请输入密码"></Input>
            </Cell>
            {
                type == 'register' ? <Cell icon={<CustomIcon type='mima'></CustomIcon>}>
                    <Input clearable type='text' onChange={value => setVerify(value)} placeholder="请输入验证码"></Input>
                    <Captcha charNum={4} onChange={handleChange}></Captcha>
                </Cell> : null
            }

        </div>
        <div className={s.operation}>
            {
                type == 'register' ? <div className={s.agress}>
                    <Checkbox></Checkbox>
                    <label className='text-light' > 阅读并同意<a>《掘掘手札条款》</a></label>
                </div> : null
            }

            <Button block theme="primary" onClick={onSubmit}>{type == 'login' ? '登录' : '注册'}</Button>
        </div>

    </div >
}